<div style="min-width: 85%; padding: 5rem;" class="grid">

  <div class="col-12">

    <p-card [header]="header">

      <form [formGroup]="form" (ngSubmit)="sendMailconfig()">

        <div class="grid">

          <div class="form-group col-12 md:col-3">
            <label i18n="@@inputServidor">SERVIDOR *</label>
            <input type="text" class="form-control" formControlName="host" id="eda_mail_host" pInputText>
          </div>

          <div class="form-group col-12 md:col-3">
            <label i18n="@@inputPort">PUERTO *</label>
            <input type="number" class="form-control" formControlName="port" id="eda_mail_port" pInputText>
          </div>

          <div class="form-group col-12 md:col-3">
            <label i18n="@@inputUsuario">USUARIO *</label>
            <input type="text" class="form-control" formControlName="user" id="eda_mail_user" pInputText>
          </div>

          <div class="form-group col-12 md:col-3">
            <label i18n="@@inputPassword">CONTRASEÑA *</label>
            <input type="password" class="form-control" formControlName="password" id="eda_ds_password" pInputText>
          </div>

          <div class="form-group col-12 md:col-12" style="margin-left: 0.5em;">
            <h6 i18n="@@inputSecurity">TLS *</h6>
            <p-inputSwitch formControlName="secure"></p-inputSwitch>
          </div>

          <div class="col-8 lg:col-10">
            <button type="button" pButton (click)="checkCredentials()" class="ui-button-success ml-2"
              i18n-label="@@checkCredentials" label="Comprobar credenciales" [disabled]="!form.valid"></button>
          </div>

          <div class="col-4 lg:col-2">
            <button style="margin: auto;" type="submit" pButton class="ui-button-success ml-2" icon="fa fa-save" i18n-label="@@guardarBtn"
              label="Guardar" id="eda_MAIL_guardar" [disabled]="!form.valid"></button>
          </div>


        </div>

      </form>
    </p-card>

  </div>

  <div class="col-12 lg:col-6">

    <p-card [header]="alertsHeader" [style]="{marginTop:'1em'}">

      <eda-table [inject]="alertsTable"></eda-table>

    </p-card>

  </div>
  
  <div class="col-12 lg:col-6">

    <p-card [header]="dashboardsHeader" [style]="{marginTop:'1em'}">

      <eda-table [inject]="dashboardsTable"></eda-table>

    </p-card>

  </div>


</div>